<!-- pages/party/[type]/[id].vue -->
<template>
    <MainLayout :breadcrumbItems="breadcrumbItems" :neighbors="neighbors" :article="article">
        
    </MainLayout>
</template>

<script setup>
//   import { format } from 'date-fns'
import MainLayout from '@/components/videoDetail.vue'
const route = useRoute()
const router = useRouter()

// 获取文章数据
//   const { data: article } = await useAsyncData(
//     `party-article-${route.params.id}`,
//     async () => {
//       const data = await $fetch(`/api/party/articles/${route.params.id}`)
//       if (!data) throw createError({ statusCode: 404, message: '文章不存在' })
//       return data
//     }
//   )
const neighbors = computed(() => {
    // 根据当前文章ID获取前后文章
    // 这里假设你有一个函数可以获取前后文章
    // 返回一个包含前后文章的对象
    return {
        prev: { id: 1, title: 'Previous Article', category: route.params.type },
        next: { id: 3, title: 'Next Article', category: route.params.type }
    }
})
const article = {
    title: '党务新闻标题',
    label: ['科普资源','健康老龄化'],
    time:'2025-02-20 19:35:08',
    views: 100,
    total:25,
    download:100,
    content: '<p>文章内容</p>',
    attachments: [
        { name: '附件1.pdf', url: '/attachments/1.pdf' },
        { name: '附件2.docx', url: '/attachments/2.docx' }
    ]
}
// 面包屑导航
const breadcrumbItems = computed(() => [
    { title: '首页', path: '/' },
    { title: '科普资源', path: '/science' },
    {
        title: route.params.type === 'all-resource' ? '全部资源' : route.params.type === 'tandard-courseware' ? '标准课件' : route.params.type === 'technical-guidelines' ? '技术指引' : route.params.type === 'video'?'科普视频':'海报宣传',
        path: `/science/${route.params.type}`
    },
    { title: article.title }
])

// 返回链接（保留分页状态）
const backUrl = computed(() => {
    const query = { ...route.query }
    delete query.id
    return {
        path: `/science/${route.params.type}`,
        query
    }
})

// 日期格式化
//   const formatDate = (dateString) => {
//     return format(new Date(dateString), 'yyyy-MM-dd HH:mm')
//   }

// SEO优化
useHead({
    // title: `${article.value.title} - 云南省健康与发展研究会`,
    meta: [
        {
            name: 'description',
            // content: article.value.summary || article.value.title
        },
        {
            property: 'og:image',
            // content: article.value.cover || '/images/og-default.png'
        }
    ]
})
</script>

<style lang="scss" scoped>
@use '@/assets/scss/main' as *;

.article-detail {
    .article-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
        margin-bottom: 1rem;

        h1 {
            color: $mytext-color;
            font-size: 1.3rem;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: normal;
        }

        .meta-info {
            color: #666;
            font-size: 0.9rem;
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            gap: 1.5rem;
            /* 元素间距 */

            /* 兼容方案 */
            text-align: center;
            /* 备用文本居中 */
        }
    }

    .article-content {
        line-height: 1.8;
        font-size: 1.1rem;

        ::v-deep(img) {
            max-width: 100%;
            height: auto;
            margin: 1rem 0;
            border-radius: 4px;
        }

        ::v-deep(table) {
            width: 100%;
            margin: 1rem 0;
            border-collapse: collapse;

            td,
            th {
                padding: 0.8rem;
                border: 1px solid #ddd;
            }
        }
    }

    .attachments {
        margin-top: 3rem;
        padding-top: 1rem;
        // border-top: 1px solid #eee;

        h3 {
            color: #333;
            margin-bottom: 1rem;
        }

        li {
            padding: 0.5rem 0;
            list-style-type: none;
            a {
                color: #1867CA;
                text-decoration: none;
                display: flex;
                align-items: center;
                gap: 0.5rem;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .article-actions {
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid #eee;
        text-align: center;
    }
}

.gov-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: #1867CA;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;

    &:hover {
        opacity: 0.9;
    }
}

@media (max-width: 768px) {
    .article-detail {
        padding: 0;
    }
}
</style>